<style lang="postcss" scoped>
    .home-container {
    }
</style>
<template>
    <section class="home-container">
        <MasterPage title="菜单管理">
            <div slot="title-icon">
                <Icon type="ios-game-controller-b"/>
            </div>
            <div slot="search">
            </div>
            <div slot="btns">
                <Button type="primary" icon="md-add" @click="modalShow = !modalShow">添加</Button>
            </div>
            <div slot="paddingContent">
                <zk-table
                        ref="table"
                        sum-text="sum"
                        index-text="#"
                        :data="this.menuTree"
                        :columns="columns"
                        :stripe="props.stripe"
                        :border="props.border"
                        :show-header="props.showHeader"
                        :show-summary="props.showSummary"
                        :show-row-hover="props.showRowHover"
                        :show-index="props.showIndex"
                        :tree-type="props.treeType"
                        :is-fold="props.isFold"
                        :expand-type="props.expandType"
                        :selection-type="props.selectionType">
                    <template slot="$expand" scope="scope">
                        {{ `My name is ${scope.row.name},
                        this rowIndex is ${scope.rowIndex}.`
                        }}
                    </template>
                    <template slot="likes" scope="scope">
                        {{ scope.row.likes.join(',') }}
                    </template>
                    <template slot="index" scope="scope">
                        1
                    </template>
                    <template slot="createtime" scope="scope">
                        {{ scope.row.createtime | formatDate}}
                    </template>
                    <template slot="menuType" scope="scope">
                        <span v-if="[undefined,null].includes(menuType.find(x => x.modelvalue === scope.row.menutype))">
                        </span>
                        <span v-else>
                             {{menuType.find(x => x.modelvalue === scope.row.menutype).modelname}}
                        </span>
                    </template>
                    <template slot="active" scope="scope">
                        <span v-if="scope.row.menutype === 127">
                            <i-switch :value="scope.row.active" @on-change="changeSwitch(scope.row)">
                                <span slot="open">开</span>
                                <span slot="close">关</span>
                            </i-switch>
                        </span>
                    </template>
                    <template slot="opt" scope="scope">
                        <Icon title="add" size="16" type="ios-add-circle-outline" style='cursor: pointer'
                              @click="addChildren(scope.row,scope.rowIndex)"/>
                        &nbsp;
                        <Icon title="edit" size="16" type="ios-create-outline" style='cursor: pointer'
                              @click="editRowData(scope.row,scope.rowIndex)"/>
                        &nbsp;
                        <Icon title="del" size="18" type="ios-trash-outline" style='cursor: pointer'
                              @click="delRowData(scope.row,scope.rowIndex)"/>
                    </template>
                </zk-table>
            </div>
            <div slot="pager">
            </div>
        </MasterPage>

        <Modal
                v-model="modalShow"
                title="aaa"
                :mask-closable="false"
                width="600px">
            <Card>
                <Form ref="deviceInfo" :model="Menu" :rules="ruleValidate" :label-width="80">
                    <Row>
                        <Col span="11">
                            <FormItem label="上级菜单" prop="parentid">
                                <treeselect
                                        :options="this.menuTree"
                                        :normalizer="normalizer"
                                        :async="false"
                                        v-model="Menu.parentid"
                                        :multiple="false"/>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="菜单类型" prop="menutype">
                                <Select type="text" v-model="Menu.menutype"
                                        placeholder="Enter your menuType">
                                    <Option v-for="item in this.menuType" :value="item.modelvalue" :key="item.modelkey">
                                        {{ item.modelname }}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="11">
                            <FormItem label="菜单名称" prop="menuname">
                                <Input v-model="Menu.menuname" placeholder="Enter your devicename"></Input>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="菜单路径" prop="actionname">
                                <Input v-model="Menu.actionname" placeholder="Enter your actionname"></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="11">
                            <FormItem label="图标" prop="parentid">
                                <Input v-model="Menu.icon" placeholder="Enter your icon"></Input>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">&nbsp;</Col>
                        <Col span="11">
                            <FormItem label="排序号" prop="port">
                                <Input v-model="Menu.sortno" placeholder="Enter your sortno"></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <div slot="footer">
                <Button size="large" type="text" @click="handleReset('deviceInfo')">取消</Button>
                <Button size="large" type="primary" @click="handleSubmit('deviceInfo')">确定</Button>
            </div>
        </Modal>
    </section>
</template>
<script>
    import MasterPage from '@/components/Master'
    import {Menu} from '../../assets/js/class';
    import {addMenu, delOneMenu, updateMenuState} from '../../assets/js/service.business';
    import {mapActions, mapGetters} from "vuex";

    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'


    import { ASYNC_SEARCH } from '@riophae/vue-treeselect'

    const simulateAsyncOperation = fn => {
        setTimeout(fn, 2000)
    }

    export default {
        components: {
            MasterPage, Treeselect
        },
        data() {
            return {
                ruleValidate: {
                    menutype: [
                        {required: true, type: 'number', message: 'The name cannot be empty', trigger: 'change'}
                    ],
                    menuname: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'},
                    ]
                },
                modalShow: false,
                props: {
                    stripe: false,
                    border: false,
                    showHeader: true,
                    showSummary: false,
                    showRowHover: true,
                    showIndex: false,
                    treeType: true,
                    isFold: true,
                    expandType: false,
                    selectionType: false,
                },
                columns: [
                    {
                        label: '菜单名称',
                        prop: 'title',
                        width: '400px',
                    },
                    {
                        label: '菜单类型',
                        prop: 'menuType',
                        type: 'template',
                        template: 'menuType',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '路径',
                        prop: 'href',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '状态',
                        prop: 'active',
                        type: 'template',
                        template: 'active',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        width: '200px',
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '操作',
                        prop: 'opt',
                        minWidth: '150px',
                        type: 'template',
                        headerAlign: 'center',
                        align: 'center',
                        template: 'opt',
                    }
                ],
                Menu: new Menu(),
                menuType: []
            }
        },
        computed: {
            ...mapGetters({
                menuTree: 'menuTree',
                all_dict: 'all_dict'
            })
        },
        methods: {
            ...mapActions({
                asyncGetAllTreeList: 'asyncGetAllTreeList',
                selectAllDict: 'selectAllDict'
            }),
            addChildren(row, index) {
                this.Menu.parentid = row.menuid;
                this.modalShow = true;
            },
            editRowData(row, index) {
                this.Menu = row;
                this.modalShow = true;
            },
            delRowData(row, index) {
                delOneMenu(row.guid).then((res) => {
                    if (0 == res.code) {
                        this.$Message.success(res.message);
                        this.asyncGetAllTreeList();
                    } else
                        this.$Message.warning(res.message);
                }).catch((res) => {
                    this.$Message.error(res.message);
                });
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        addMenu(this.Menu).then((res) => {
                                if (0 == res.code) {
                                    this.$Message.success(res.message);
                                    this.asyncGetAllTreeList();
                                    this.modalShow = false;
                                    this.handleReset(name);
                                } else
                                    this.$Message.warning(res.message);
                            }
                        ).catch((res) => {
                            this.$Message.error(res.message);
                        });
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.Menu.guid = null;
                this.modalShow = false;
            },
            loadOptions({action, searchQuery, callback}){
                //:options="this.menuTree"
                if (action === ASYNC_SEARCH) {
                    simulateAsyncOperation(() => {
                        const options = this.menuTree.map(i => ({
                            id: `${searchQuery}-${i}`,
                            label: `${searchQuery}-${i}`,
                        }))
                        console.info(options);
                        callback(null, options)
                    })
                }
            },
            normalizer(node) {
                //去掉children=[]的children属性
                if (null == node.children || (node.children && !node.children.length)) {
                    delete node.children;
                }
                return {
                    id: node.num,
                    label: node.title,
                    children: node.children
                }
            },
            changeSwitch(row) {
                updateMenuState(row.guid).then((res) => {
                });
            }
        },
        async mounted() {
            await this.selectAllDict().then((res) => {
                if (0 == res.code) {
                    this.menuType = res.data.filter(x => x.parentmodelkey === 100);
                }
            });
        },
        created() {
            this.asyncGetAllTreeList();
        }
    }
</script>
